<template>
    <!--导航栏部分-->
<div class="sidenav">
    <div style="height:50px"></div>
    <router-link  to="/SelfInfo"> <div class="AvatarBox">
        <img src="../assets/resource/avatar.png">
        </div>
    </router-link>
        <div class="NameBox">
        <div>Administrator</div>
        </div>
    <div style="height:50px"></div>
    <router-link to="/AddUser"><div class="NavItems">Adduser</div></router-link>
    <router-link to="/Management"><div class="NavItems">Management</div></router-link>
    <router-link to="/Role"><div class="NavItems">RoleManagement</div></router-link>
    <div class="NavItems" @click="logout()">Logout</div>
      </div>
    <!--页面主体-->
    <div class="main">
        <div class="Head">
	<div class="HeadPrompt">Management</div>
</div>
<div style="height: 50px;px;width:100% "></div>
<div class="SearchBox">
    <router-link to="/AddUser" style="margin-left: 10%;margin-right: 3%;"><div class="AddUserButton"><img src="../assets/resource/Adduser.png"></div></router-link>
    <div class="SearchBar">
        <input placeholder="输入用户名以搜索用户">
    </div>
<div class="SearchButton"><img src="../assets/resource/search.png"></div>
</div>
<br>
<div class="ListBox">
<div class="LR_List" style="margin-left: 10%;">
    <div v-for="(items,index) of  this.rowList.first " :key="currentData[index].id" class="ListItems">
        <div class="ListItems_Dot">·</div>
        <div class="ListItems_conf"><img src="../assets/resource/user.png"></div>
        <div class="ListItems_SimpleMessage">
        <div class="ListItems_SimpleMassage_Message"  >UserName:&nbsp;UserName:&nbsp;{{currentData[index].userName}}</div>
        <div class="ListItems_SimpleMassage_Message" >StudentId:&nbsp;{{currentData[index].studentId}}</div>
        </div>
        <div class="ListItems_ButtonBox" @click="userdetails(index)"><div class="ListItems_ButtonBox_Button2">I</div></div>
        <div class="ListItems_ButtonBox" @click="RemoveUser(index)"><div class="ListItems_ButtonBox_Button">D</div></div>
    </div>
</div>
<div class="LR_List" style="margin-left: 3%;">
    <div v-for="(items,index) of  this.rowList.second " :key="currentData[index+3].id" class="ListItems">
    <div class="ListItems_Dot">·</div>
        <div class="ListItems_conf"><img src="../assets/resource/user.png"></div>
        <div class="ListItems_SimpleMessage">
        <div class="ListItems_SimpleMassage_Message"  >UserName:&nbsp;{{currentData[index+3].userName}}</div>
        <div class="ListItems_SimpleMassage_Message" >StudentId:&nbsp;{{currentData[index+3].studentId}}</div>
        </div>
        <div class="ListItems_ButtonBox" @click="userdetails(index+3)"><div class="ListItems_ButtonBox_Button2">I</div></div>
        <div class="ListItems_ButtonBox" @click="RemoveUser(index+3)"><div class="ListItems_ButtonBox_Button">D</div></div>
</div>
</div>





</div>
<br><br>
<div style="width:100%;display: flex;justify-content: center;">
<el-pagination v-model:currentPage="pageindex" layout="prev, pager, next" :page-count="this.PageNum" pager-count=6 @current-change="handleCurrentChange"></el-pagination>
</div>


    </div>

<el-dialog class="DialogBOX" v-model="showinput" title="用户详情" center  align-center>
    <div class="DetailBOX">
    <br>
    <div class="DetailbodyBox">
    <div class="DetailbodyBox2">
    <div class="DetailinfoBox">
	<div>Username:</div>
	</div>
	<input class="inputText" type="text" id="UserName" v-model="s1">
    <br>
	<div class="DetailinfoBox">
	<div>StudentId:</div>
	</div>
	<input class="inputText" type="text" id="StudentId" v-model="s2">
    <br>
	<div class="DetailinfoBox">
	<div>Mobile:</div>
	</div>
	<input class="inputText" type="text" id="PhoneNumber" v-model="s3">
    <br>
    </div>
    <div class="DetailbodyBox2">
        
	<div class="DetailinfoBox">
	<div>Password:</div>
	</div>
	<input class="inputText" type="text" id="PassWord" v-model="s4">
    <br>
	<div class="DetailinfoBox">
	<div>Region:</div>
	</div>
	<input class="inputText" type="text"  id="Region" v-model="s5">
    <br>
	<div class="DetailinfoBox">
	<div>E-mail:</div>
	</div>
	<input class="inputText" type="text" id="Email" v-model="s6">
    <br>
    </div>
    </div> 
    <div style="width:100%;height:50px;display: flex;flex-direction: row;">
    <input tyre="button" class="button_Class3" value="submit" @click="save()">
    <input type="button" class="button_Class2" value="close" @click="showinput = false">
    </div>



    </div>
</el-dialog> 

     
</template>

<script >

import axios  from 'axios';
import router from '@/routers';
import {ref} from 'vue'
export default {

data(){
  return{
    currentData:[],
    pagesize:6,
    PageNum:1,
    pageindex:0,
    rowList:{
        first:0,
        second:0,
      },
    s1:'',
    s2:'',
    s3:'',
    s4:'',
    s5:'',
    s6:'',
    showinput:ref(false),
    
     }
},
 
methods:{
getdata(){
  axios.get("api/user/GetAllUsers",{
            params:{
                pageSize:this.pagesize,
                PageIndex:this.pageindex
            },
            headers:{
                _accessToken_: localStorage.getItem("accessToken"),
            }

  }).then((result) => {
    if(result.data.success){
                this.currentData=result.data.userList;
                this.PageNum=result.data.pageNum;
                if(this.currentData.length<=3){
              this.rowList.first=this.currentData.length;
              this.rowList.second=this.rowList.third=0;
            }
            else {
              this.rowList.first=3;
              this.rowList.second=this.currentData.length-3;
            }
                return;
            }
            else{
             alert(result.data.msg);
             router.replace("/AddUser");
             return;
            }
        
          });



},
logout(){
    if(confirm("确定退出登录？")){
        axios.get('/api/auth/logout',{
            headers: {
                '_accessToken_': localStorage.getItem("accessToken")
            }
                
        } 
  ).then((result) => {
            if(result.data.success){
                localStorage.removeItem("accessToken");
                this.$router.replace('/Login');
                return;
            }
            else{
             alert(result.data.msg);
             return;
            }
      
              
          });

}
},

userdetails(index){
    this.showinput=true;
    this.s1=this.currentData[index].userName;
    this.s2=this.currentData[index].studentId;
    this.s3=this.currentData[index].phoneNumber;
    this.s4=this.currentData[index].password;
    this.s5=this.currentData[index].region;
    this.s6=this.currentData[index].email;
},

RemoveUser(index){
    console.log("lalal");
    console.log(this.currentData[index].userName);
    if(confirm("确定删除用户？")){
        axios.delete('/api/user/RemoveUser',{
            params:{
                UserName:this.currentData[index].userName,
            },
            headers: {
                '_accessToken_': localStorage.getItem("accessToken"),
            }
                
        } 
  ).then((result) => {
            if(result.data.success){
                alert("您已成功删除"+this.currentData[index].userName+"用户");
                this.getdata();
            }
            else{
                alert(result.data.msg);
            }
          });

}
return;

},
handleCurrentChange(val) {
     console.log(`当前页: ${val}`);
      this.pageindex =val;
      this.getdata();
    },
    sendmessage(){
        this.getmessage = true
    }


},
async created(){
    axios.get("api/user/GetAllUsers",{
            params:{
                pageSize:this.pagesize,
                PageIndex:this.pageindex
            },
            headers:{
                _accessToken_: localStorage.getItem("accessToken"),
            }

  }).then((result) => {
            if(result.data.success){
                this.currentData=result.data.userList;
                this.PageNum=result.data.pageNum;
                if(this.currentData.length<=3){
              this.rowList.first=this.currentData.length;
              this.rowList.second=this.rowList.third=0;
            }
            else {
              this.rowList.first=3;
              this.rowList.second=this.currentData.length-3;
            }
                return;
            }
            else{
             alert(result.data.msg);
             router.replace("/AddUser");
             return;
            }
      
              
          });

}

}

</script>

<style lang="less">
@import "@/assets/word-like.less";
@import "@/assets/paper.less";
@import "@/assets/CSS/Nav.css";
@import "@/assets/CSS/Management.css";

</style>